<template>
	<div class="wrap-cont">
		<div class="address-guanl">
			<p>地址管理</p>
			<router-link to="/address03"><button>添加新地址</button></router-link>
		</div>
		<div class="address-jiedao">
			<p>收货人</p>
			<p>所在区域</p>
			<p>街道地址</p>
			<p>联系电话</p>
			<p>备注</p>
			<p>操作</p>
		</div>
		<ul class="dizhix">

		</ul>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		methods: {
			fn4: function() {
				var params = new URLSearchParams();
				params.append("fun", "0");
				axios.post("/api/vueffPHP/cd.php", params).then(function(res) {
					if(res.data.phone == "") {
						return false;
					};
					params.append("fun", "0");
					params.append("phone", res.data.phone);
					axios.post("/api/vueffPHP/address.php", params).then(function(res) {
						$("<li><span>" + res.data.name + " " + res.data.dizhi0 + " " + res.data.xxdizhi0 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
						$(".shanchuf1").eq(0).attr("index", 0);
						if(res.data.dizhi1 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi1 + " " + res.data.xxdizhi1 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(1).attr("index", 1);
						};
						if(res.data.dizhi2 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi2 + " " + res.data.xxdizhi2 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(2).attr("index", 2);
						};
						if(res.data.dizhi3 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi3 + " " + res.data.xxdizhi3 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(3).attr("index", 3);
						};
						if(res.data.dizhi4 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi4 + " " + res.data.xxdizhi4 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(4).attr("index", 4);
						};
						if(res.data.dizhi5 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi5 + " " + res.data.xxdizhi5 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(5).attr("index", 5);
						};
						if(res.data.dizhi6 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi6 + " " + res.data.xxdizhi6 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(6).attr("index", 6);
						};
						if(res.data.dizhi7 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi7 + " " + res.data.xxdizhi7 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(7).attr("index", 7);
						};
						if(res.data.dizhi8 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi8 + " " + res.data.xxdizhi8 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(8).attr("index", 8);
						};
						if(res.data.dizhi9 != "") {
							$("<li><span>" + res.data.name + " " + res.data.dizhi9 + " " + res.data.xxdizhi9 + " 固定电话 " + res.data.dianhua + "</span><span class='morenf'>默认地址</span><div class='caozuof1'><span class='shezhif'>设置为默认地址</span><span class='xiugaibf'>修改</span><span class='shanchuf1'>删除</span></div></li>").appendTo(".dizhix");
							$(".shanchuf1").eq(9).attr("index", 9);
						};
				var indexff;
						var fnf;
						
						$(".dizhix .yuanf").attr("check", false);
						$(".dizhix .yuanf").eq(0).attr("check", true);
						$(".dizhix .yuanf").click(function() {
							$(this).attr("check", true).addClass("activefd").parent().siblings("li").find(".yuanf").attr("check", false).removeClass("activefd");
						});
						$(".dizhix li").eq(0).find(".shezhif").css("opacity", "0");
						
						$(".dizhix li .shezhif").click(function() {
							$(this).parent().siblings(".morenf").css("opacity", "1").parent().siblings("li").find(".morenf").css("opacity", "0");
							$(this).parent().siblings(".yuanf").attr("check", true).addClass("activefd").parent().siblings("li").find(".yuanf").attr("check", false).removeClass("activefd");
							$(this).css("opacity", "0").parent().parent().siblings("li").find(".shezhif").css("opacity", "1");
						});
						$(".dizhix li .caozuof1 .shanchuf1").click(function() {
							if($(this).parent().siblings(".yuanf").attr("check") == "true") {
								alert("默认地址无法删除！");
								return false;
							};
							$(this).parent().parent().slideUp(500, function() {
								$(this).remove();
							});
							indexff = $(this).attr("index");
							params.append("fun", "0");
							axios.post("/api/vueffPHP/cd.php", params).then(function(res) {
								params.append("phone", res.data.phone);
								params.append("fun", "1");
								params.append("id", "dizhi" + indexff);
								axios.post("/api/vueffPHP/address.php", params).then(function(res) {

								});
							});
						});
						$(".zhankaif span").eq(0).click(function() {
							$(this).hide();
							$(".zhankaif img").eq(0).hide();
							for(var i = 0; i < l4; i++) {
								$(".dizhix li").eq(i).slideDown(500);
							};
						});
						$(".zhankaif span").eq(1).click(function() {
							$(".zhankaif img").eq(0).show();
							$(".zhankaif span").eq(0).show();
							for(var i = 0; i < l4; i++) {
								if(i > 3) {
									$(".dizhix li").eq(i).slideUp(500);
								};
							};
						});
						$(".xinf").click(function() {
							fnf = "3";
							xiugai();
						});
						$(".caozuof1 .xiugaibf").click(function() {
							indexff = $(this).siblings(".shanchuf1").attr("index");
							fnf = "2";
							xiugai();
						});
						$(".fanhuif").click(function() {
							$(".backf").fadeOut(500);
						});
						$(".baocunf").click(function() {
							if($(".inputf input").eq(0).val() == "" || $(".inputf select").eq(0).val() == "省" || $(".inputf select").eq(1).val() == "市" || $(".inputf select").eq(2).val() == "区" || $(".inputf input").eq(2).val() == "" || $(".inputf input").eq(3).val() == "" || $(".inputf input").eq(4).val() == "" || $(".inputf input").eq(5).val() == "") {
								alert("请正确填写信息！");
								return false;
							};
							params.append("fun", "0");
							axios.post("/api/vueffPHP/cd.php", params).then(function(res) {
								params.append("phone", res.data.phone);
								params.append("fun", fnf);
								params.append("id", "dizhi" + indexff);
								params.append("name", $(".inputf input").eq(0).val());
								params.append("dizhi", $(".inputf select").eq(0).val() + " " + $(".inputf select").eq(1).val() + " " + $(".inputf select").eq(2).val());
								params.append("xxdizhi", $(".inputf input").eq(2).val());
								params.append("phone1", $(".inputf input").eq(3).val());
								params.append("dianhua", $(".inputf input").eq(4).val() + "-" + $(".inputf input").eq(5).val());
								axios.post("/api/vueffPHP/address.php", params).then(function(res) {
									if(res.data == "0") {
										alert("您的收货地址已满，请及时清理！");
										return false;
									};
									location.reload();
								});
							});
						});
						$(".changyongf span").attr("check", false);
						$(".changyongf span").click(function() {
							if($(this).attr("check") == "false") {
								$(this).attr("check", true).addClass("activesf");
							} else if($(this).attr("check") == "true") {
								$(this).attr("check", false).removeClass("activesf");
							};
						});

						function xiugai() {
							$(".backf").fadeIn(500);
							$(".shouhuof").hide();
							$(".querenf").hide();
							$(".btnf").css("border-bottom", "none");
						};
					});
				});

			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.fn4();
		},
		components: {
			
		}
	}
</script>

<style>
	.wrap-cont {
		width: 1085px;
		float: left;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	.address-guanl{
		width: 100%;
		margin: 0 auto;
		height: 57px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E7E7E7;
	}
	.address-guanl p{
		font-size: 18px;
		margin-left: 20px;
	}
	.address-guanl button{
		width: 90px; 
		height: 30px;
		background: #498e3d;
		color: white;
		border-radius: 5px;
		margin-right: 20px;
	}
 .address-jiedao{
 	width: 1044px;
 	height: 44px;
 	background: #D3D3D3;
 	margin: 0 auto;
 	margin-top: 20px;
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
 	font-size: 16px;
 }
 /*添加地址*/
.dizhix {
		width: 1044px;
		margin: 0 auto;
	}
	
	.dizhix li {
		width: 1044px;
		height: 38px;
		background: rgb(244, 255, 242);
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		padding-left: 18px;
		color: #666666;
		font-size: 14px;
		/*border: 1px solid red;*/
		
	}
	
	.dizhix li .yuanf {
		width: 16px;
		height: 16px;
		background: #ffffff;
		border: solid 1px #cccccc;
		border-radius: 50%;
		margin-right: 13px;
		cursor: pointer;
		box-sizing: border-box;
	}
	
	.dizhix li div.activefd {
		/*background: url() no-repeat;*/
		background-size: 100% 100%;
	}
	
	.dizhix li>span {
		width: 675px;
	}
	
	.dizhix li>.morenf {
		color: #999999;
		width: 100px;
		padding-left: 10px;
	}
	
	.dizhix li:first-child {
		border: solid 1px #e5e5e5;
	}
	
	.dizhix li .caozuof1 {
		text-align: right;
		color: #498e3d;
		width: 590px;
	}
	
	.dizhix li .caozuof1 span {
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin: 0 20px;
	}
	
	.dizhix li .caozuof1 span.shezhif {
		color: #f08200;
	}
	
	
</style>